数据录入

2024-05-14 02:00| 来源: 网络整理| 查看: 265

Checkbox多选框何时使用单独引入此组件代码演示API[nz-checkbox]directivenz-checkbox-groupcomponentnz-checkbox-wrappercomponent方法[nz-checkbox]directiveCheckbox多选框

多选框。

何时使用在一组可选项中进行多项选择时；单独使用可以表示两种状态之间的切换，和 switch 类似。区别在于切换 switch 会直接触发状态改变，而 checkbox 一般用于状态标记，需要和提交操作配合。单独引入此组件

想要了解更多关于单独引入组件的内容，可以在快速上手页面进行查看。

import { NzCheckboxModule } from 'ng-zorro-antd/checkbox'; 代码演示

基本用法

简单的 checkbox。

import { Component } from '@angular/core';@Component({ selector: 'nz-demo-checkbox-basic', template: ` Checkbox `})export class NzDemoCheckboxBasicComponent { checked = true;}

受控的 Checkbox

联动 checkbox。

import { Component } from '@angular/core';@Component({ selector: 'nz-demo-checkbox-controller', template: `

{{ isCheckedButton ? 'Checked' : 'Unchecked' }} - {{ isDisabledButton ? 'Disabled' : 'Enabled' }}

`, styles: [ ` button { margin-right: 8px; } ` ]})export class NzDemoCheckboxControllerComponent { isCheckedButton = true; isDisabledButton = false; checkButton(): void { this.isCheckedButton = !this.isCheckedButton; } disableButton(): void { this.isDisabledButton = !this.isDisabledButton; }}

全选

在实现全选效果时，你可能会用到 nzIndeterminate 属性。

import { Component } from '@angular/core';@Component({ selector: 'nz-demo-checkbox-check-all', template: ` Check all `})export class NzDemoCheckboxCheckAllComponent { allChecked = false; indeterminate = true; checkOptionsOne = [ { label: 'Apple', value: 'Apple', checked: true }, { label: 'Pear', value: 'Pear', checked: false }, { label: 'Orange', value: 'Orange', checked: false } ]; updateAllChecked(): void { this.indeterminate = false; if (this.allChecked) { this.checkOptionsOne = this.checkOptionsOne.map(item => { return { ...item, checked: true }; }); } else { this.checkOptionsOne = this.checkOptionsOne.map(item => { return { ...item, checked: false }; }); } } updateSingleChecked(): void { if (this.checkOptionsOne.every(item => item.checked === false)) { this.allChecked = false; this.indeterminate = false; } else if (this.checkOptionsOne.every(item => item.checked === true)) { this.allChecked = true; this.indeterminate = false; } else { this.indeterminate = true; } }}

不可用

checkbox 不可用。

import { Component } from '@angular/core';@Component({ selector: 'nz-demo-checkbox-disabled', template: ` `})export class NzDemoCheckboxDisabledComponent {}

Checkbox 组

方便的从数组生成 Checkbox 组。

import { Component } from '@angular/core';@Component({ selector: 'nz-demo-checkbox-group', template: ` `})export class NzDemoCheckboxGroupComponent { checkOptionsOne = [ { label: 'Apple', value: 'Apple', checked: true }, { label: 'Pear', value: 'Pear' }, { label: 'Orange', value: 'Orange' } ]; checkOptionsTwo = [ { label: 'Apple', value: 'Apple' }, { label: 'Pear', value: 'Pear', checked: true }, { label: 'Orange', value: 'Orange' } ]; checkOptionsThree = [ { label: 'Apple', value: 'Apple', disabled: true, checked: true }, { label: 'Pear', value: 'Pear', disabled: true }, { label: 'Orange', value: 'Orange' } ]; log(value: object[]): void { console.log(value); }}

布局

nz-checkbox-wrapper 内嵌 nz-checkbox 并与 Grid 组件一起使用，可以实现灵活的布局。

import { Component } from '@angular/core';@Component({ selector: 'nz-demo-checkbox-layout', template: ` A B C D E `})export class NzDemoCheckboxLayoutComponent { log(value: string[]): void { console.log(value); }}

API[nz-checkbox]directive参数说明类型默认值[nzAutoFocus]自动获取焦点booleanfalse[nzDisabled]设定 disable 状态booleanfalse[ngModel]指定当前是否选中，可双向绑定booleanfalse[nzIndeterminate]设置 indeterminate 状态，只负责样式控制booleanfalse[nzValue]仅与 nz-checkbox-wrapper 的选中回调配合使用string-(ngModelChange)选中变化时回调EventEmitter- nz-checkbox-groupcomponent参数说明类型默认值[ngModel]指定可选项，可双向绑定Array[][nzDisabled]设定全部 checkbox disable 状态booleanfalse(ngModelChange)选中数据变化时的回调EventEmitter- nz-checkbox-wrappercomponent参数说明类型默认值(nzOnChange)选中数据变化时的回调EventEmitter- 方法[nz-checkbox]directive

通过ViewChild或其他方式获得 nz-checkbox 实例

名称描述focus()获取焦点blur()移除焦点

【本文地址】

公司简介

联系我们